<template>
    <swiper :options="swiperOption">
        <swiper-slide v-for="slide in swiperSlides" :key="slide.id" class="liing"><img :src="slide.src">
        </swiper-slide>
        <p class="swiper-pagination" slot="pagination"></p>
    </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
    name: 'Banner',
    data() {
        return {
            swiperOption: {
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination'
                }
            },
            swiperSlides: [{ id: 1, src: require('../../../images/1.jpg') }, { id: 2, src: require('../../../images/3.jpg') }, { id: 3, src: require('../../../images/5.jpg') }, { id: 4, src: require('../../../images/2.jpg') },]
        }
    },
    components: {
        swiper,
        swiperSlide
    }
}
</script>

<style lang="scss" scoped>
img {
    width: 100%;
    height: 300px;
    background-size: 100% 100%;
}
</style>